// pages/rtc11/rtc11.js
const app = getApp();
Page({
  /**
   * 页面的初始数据
   */
  data: {
    //rtc初始化配置参数
    rtcConfig: {
      sdkAppID: '123123', // 必要参数 开通实时音视频服务创建应用后分配的 sdkAppID
      userID: '123123', // 必要参数 用户 ID 可以由您的帐号系统指定
      userSig: '13123', // 必要参数 身份签名，相当于登录密码的作用
    },
    _bigVideoIndex: 0, //大窗口的索引，默认是第0个，即pusher
    //小窗口的宽高
    _littleWidth: 75,
    _littleHeight: 100,
    //player列表
    videoList: [{
        width: '100%',
        height: '100%',
        //move-view在area的位置
        x: 0,
        y: 0,
        type: "pusher", //视频类型
        direction: 'all', //可移动的方向
        styleClass: 'mv-big', //大窗口的样式
        videoData: {}, //视频数据
      },
      // {
      //   width: '75px',
      //   height: '100px',
      //   x: app.globalData.systemInfo.windowWidth - 1 * 75,
      //   y: 0,
      //   type: "player",
      //   direction: 'all',
      //   styleClass: 'mv-little', //小窗口样式
      //   videoData: {}, //视频数据
      // },
      // {
      //   width: '75px',
      //   height: '100px',
      //   x: app.globalData.systemInfo.windowWidth - 2 * 75,
      //   y: 0,
      //   type: "player",
      //   direction: 'all',
      //   styleClass: 'mv-little',
      //   videoData: {}, //视频数据
      // }
    ],
    //可视窗口的宽度
    windowWidth: app.globalData.systemInfo.windowWidth, //可视窗口的宽度
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let pageInstance = this;
    setInterval(() => {
      if (pageInstance.data.videoList.length < 10) {
        pageInstance.onVideoListAdd();
        clearInterval();
      }
    }, 1000 * 3);
    // setInterval(() => {
    //   if (pageInstance.data.videoList.length > 1) {
    //     pageInstance.onVideoListLevel();
    //   } else {
    //     clearInterval();
    //   }
    // }, 1000 * 8);
  },

  /**
   * move-view 移动时触发此事件，此时需要将videoList内的x y更改
   */
  onMvChange(event) {
    const {
      index,
      type
    } = event.currentTarget.dataset;
    const {
      x,
      y
    } = event.detail;
    console.log(x, y);
    this.data.videoList[index].x = x;
    this.data.videoList[index].y = y;
  },
  /**
   * 点击小窗口
   * @param {} event 
   */
  onClickVideo(event) {
    let pageInstance = this;
    const {
      type,
      index,
    } = event.currentTarget.dataset;

    if (type == "mv-little") {
      //先拼接id
      let viewId = '#' + type + index;
      //点击小窗口，执行切换
      const query = wx.createSelectorQuery();
      query.select(viewId).boundingClientRect();
      query.exec(function (res) {
        // width: '100%',
        // height: '100%',
        // //move-view在area的位置
        // x: 0,
        // y: 0,
        // type: "pusher", //视频类型
        // direction: '', //可移动的方向
        // styleClass: 'mv-big', //大窗口的样式
        // videoData: {}, //视频数据
        const {
          _bigVideoIndex,
          videoList: _videoList
        } = pageInstance.data;
        const left = res[0].left;
        const top = res[0].top;
        //执行变换
        _videoList[_bigVideoIndex].width = '75px';
        _videoList[_bigVideoIndex].height = '100px';
        _videoList[_bigVideoIndex].x = left;
        _videoList[_bigVideoIndex].y = top;
        _videoList[_bigVideoIndex].direction = 'all';
        _videoList[_bigVideoIndex].styleClass = 'mv-little';

        _videoList[index].width = '100%';
        _videoList[index].height = '100%';
        _videoList[index].x = '0';
        _videoList[index].y = '0';
        _videoList[index].direction = 'all';
        _videoList[index].styleClass = 'mv-big';

        pageInstance._bigVideoIndex = index;
        pageInstance.setData({
          videoList: _videoList,
          _bigVideoIndex: index
        })

      });
    } else {}
  },

  /**
   * 有新用户进房间，列表数据的改变，此时应该遍历列表，然后更新视频数据
   */
  onVideoListAdd() {
    const {
      videoList: _videoList
    } = this.data;
    let playerList = [{
        streamId: '6544'
      }, {
        streamId: '549887'
      },
      {
        streamId: '75464'
      }
    ];
    let player = {
      id: '75464'
    };
    //view是3行3列的格式
    for (let i = 0; i < playerList.length; i++) {
      //是新添加的player,添加到videoList去
      if (playerList[i].streamId == player.id) {
        let _x = app.globalData.systemInfo.windowWidth - ((_videoList.length - 1) % 3 + 1) * 75;
        let _y = Number.parseInt((_videoList.length - 1) / 3) * 100;
        _videoList.push({
          width: '75px',
          height: '100px',
          x: _x,
          y: _y,
          type: "player",
          direction: 'all',
          styleClass: 'mv-little', //小窗口样式
          videoData: {
            streamId: '75464'
          }, //视频数据
        })
      }
    }
    this.setData({
      videoList: _videoList
    })
  },
  /**
   * 有用户离开房间
   */
  onVideoListLevel() {
    let player = {
      id: '75464'
    };
    const {
      videoList: _videoList
    } = this.data;
    for (let i = 0; i < _videoList.length; i++) {
      if (_videoList[i].videoData.streamId == player.id) {
        _videoList.pop(i);
      }
    }
    this.setData({
      videoList: _videoList
    })
  }
})